
<div id="title_bar">爬虫数据提取配置工具
    <a id="close" ng-click="close()"></a>
    <a id="minimize" ng-click="minimize()"></a>
</div>

<div class="container" id="index">
    <div class="col-md-12">
        <h4>选择爬虫</h4>
    </div>
    <div class="col-md-12"><hr style="border-style:inset;"/></div>
    <div class="col-md-12">
        <div class="list-group">
            <a class="list-group-item" data-name="{{crawl.name}}" ng-click="crawl_step_select_onclick($event.target)" ng-repeat="crawl in crawl_list">{{crawl.name}} --- {{crawl.desc}}</a>
        </div>
    </div>
</div>

<div class="container" id="step">
    <div class="col-md-12">
        <h4>选择 Step</h4>
        <p>&nbsp;{{currentCrawl.desc}}</p>
    </div>
    <div class="col-md-12"><hr style="border-style:inset;"/></div>
    <div class="col-md-12">
        <div class="list-group">
            <a class="list-group-item" data-sid="{{step.stepID}}" ng-click="to_extract_config($event.target)" ng-repeat="step in currentCrawl.steps">Step{{step.stepID}} : {{step.stepName}} --- {{step.desc}}</a>
        </div>
    </div>
    <div class="col-md-12">
        <button class="button button-small button-primary" style="float: right;" ng-click="to_index()">返回</button>
    </div>
</div>

<div class="container" id="extract_config">
    <div class="col-md-12">
        <h4>配置抽取</h4>
        <p>&nbsp;{{currentCrawl.desc}} / {{currentStep.desc}} </p>
    </div>
    <div class="col-md-12"><hr style="border-style:inset;"/></div>
    <div class="col-md-12" style="border:1px solid;">
        <form class="form" style="text-align:center;">
            <div class="form-group">
                <label for="key" class="control-label">字段名</label>
                <input type="text" id="key" class="form-control" ng-model="current_field.key">
            </div>
            <div class="form-group">
                <label for="datatype" class="control-label">数据类型</label>
                <select class="form-control" id="datatype" ng-model="current_field.datatype" ng-options="s.type as s.type for s in dataTypes">
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">元素提取路径 : </label>
                <em id="need_pick_tips">(待选取)</em>
                <span ng-repeat="key in keys" style="background:#0099cc; color:#fff;">{{key.tagname}} . </span>
            </div>

            <div class="form-group col-md-12">
                <label class="checkbox-inline">
                    <input type="checkbox" name="ismultiple" ng-model="current_field.ismultiple">是否提取其他路径相同的元素的内容</input>
                </label>
                <button class="button button-small button-primary button-capitalize col-md-12" style="color:#000; float:right;" ng-click="add_field()">添加条目</button>
            </div>
        </form>
    </div>
    <div class="col-md-12" style="margin-top: 10px; height:240px; overflow:auto; border:1px solid;">
        <table class="table table-hover">
            <thead>
                <tr>
                    <td>键</td>
                    <td>数据类型</td>
                    <td>元素提取路径</td>
                    <td>Mulitiple</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
            <tr ng-repeat="field in config.fields">
                <td>{{field.key}}</td>
                <td>{{field.datatype}}</td>
                <td>
                    <span ng-repeat="key in field.keys">{{key.tagname}} </span>
                </td>
                <td>{{field.ismultiple}}</td>
                <td><a class="button button-caution button-small button-square" id="{{field.id}}" ng-click="delete_field($event.target)"><span id="{{field.id}}" class="glyphicon glyphicon-minus"></span></a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-12" style="margin-top:10px; padding-top: 5px; padding-bottom: 5px; border:1px solid;">
        <label for="key" class="control-label col-md-2">测试URL :</label>
        <input type="text" id="key" class="col-md-8" ng-model="extract_test_url">
        <button class="button button-small button-primary button-capitalize col-md-2" style="float: right;" ng-click="extract_test_data()">测试提取</button>
    </div>
    <div class="col-md-12" style="margin-top:30px;">
        <button class="button button-small button-primary button-capitalize col-md-12" ng-click="extract_data()">提取数据</button>
        <button class="button button-small button-primary button-capitalize col-md-12" style="float: right;" ng-click="save_config()">保存</button>
        <button class="button button-small button-capitalize col-md-12" style="float: right;border:1px solid; border-color:#aaa;" ng-click="to_step_select()">返回</button>
        <p id="save-requesting-tips" style="color:red;">保存中...</p>
        <p id="save-success-tips" style="color:red;">保存成功 !</p>
        <p id="save-failed-tips" style="color:red;">保存失败 !</p>
        <p id="extract-requesting-tips" style="color:red;">提取中...</p>
        <p id="extract-running-tips" style="color:red;">提取已经开始 !</p>
        <p id="extract-success-tips" style="color:red;">提取开始 !</p>
        <p id="extract-failed-tips" style="color:red;">提取失败 !</p>
    </div>
</div>

